此篇會探討 container 與 wrapper 用法,會著重在 wrapper 的探討。
在開始介紹前,想先說關於 container
、wrapper
的關係有不少種解釋,我先簡單分為兩派。
相同派:
異同派:
以下內容會以 異同派
的觀點介紹 Wrapper
。
是一個容器,內入可包含多個元素。
特性:
常見兩種命名方式(兩種都可以):
wrapper
wrap
Wrapper 兩種解釋:
第一種:
wrapper
代表最外層,包含網頁所有內容。
看到這張圖,你各位啊是不是想留言說我圖片放錯了!
其實要用一層一層結構來看上面這張圖,第一層是 <body>
,下一層是 wrapper
,兩者從結構來看其實是重疊的,因此通常會忽略。
那為什麼會需要多這一層 wrapper
?
<body>
隔開。wrapper
,避免污染到 <body>
。上述兩點也有其它方法可以達到相同效果:
<main>
HTML 標籤,用來包含主要內容。第二種:
wrapper
內層僅包含單
個元素。
結構來看上面這張圖,wrapper
主要用來當作銜接 container
內層元素的街口。
這樣做的好處是?
我覺得有點像 BEM 連接詞的感覺,用來連接父容層器,使階層的關係一眼明瞭。
以上純屬個人言論,若有錯誤歡迎大家在下方留言,也歡迎想交流的都可以在下方留言。
簡單用兩個範例介紹。
第一種範例:
<body>
需要設置的全站樣式,設置在 wrapper
上面。<body>
<div class="wrapper">
<div class="container">
container
</div>
</div>
</body>
.wrapper {
padding: 40px 20px;
line-height: 1.5;
}
.container {
margin: 0 auto;
max-width: 1000px;
background: green;
padding: 20px;
}
第二個範例:
wrapper
用來連接 container
內層元素。<ul class="items-container">
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
<li class="item-wrapper">
<div class="item">...</div>
</li>
</ul>
沒有哪個更好,只有適不適合。
參考文獻: